import { useEffect, useState, memo } from 'react'
import moment from 'moment'
import './index.css'

const MyProgress = ({ data }) => {
  const [status, setStatus] = useState([])
  const [timeLength, setTimeLength] = useState([])

  useEffect(() => {
    if (data && data.length > 0) {
      let statusTemp = []
      let timeLengthTemp = []
      timeLengthTemp.push(0)
      for (let i = 0; i < data.length; i++) {
        let statusT = data[i].status
        for (let j = i; j < data.length; j++) {
          if (data[j].status !== statusT) {
            i = j - 1
            break
          }
          if (j === data.length - 1) {
            i = j
            break
          }
        }
        let timeT = new Date(data[i].time)
        let length =
          parseInt(moment(timeT).format('HH')) * 60 +
          parseInt(moment(timeT).format('mm'))
        statusTemp.push(statusT)
        timeLengthTemp.push(length)
      }

      for (let i = timeLengthTemp.length - 1; i > 0; i--) {
        timeLengthTemp[i] = timeLengthTemp[i] - timeLengthTemp[i - 1]
      }

      setTimeLength([...timeLengthTemp])
      setStatus([...statusTemp])
    }
  }, [data])

  return (
    <div className="my_progress">
      {status.map((item, index) => {
        if (item) {
          return (
            <div
              key={index}
              style={{
                width: timeLength[index + 1],
                height: 15,
                // marginLeft: timeLength[index],
                backgroundColor: '#1890ff',
              }}></div>
          )
        } else {
          return (
            <div
              key={index}
              style={{
                width: timeLength[index + 1],
                height: 15,
                // marginLeft: timeLength[index],
                backgroundColor: '#ff0000',
              }}></div>
          )
        }
      })}
    </div>
  )
}

export default memo(MyProgress)
